<template>
    <a-pagination
      v-model="current"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      @showSizeChange="onShowSizeChange"
      :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
    >
    </a-pagination>
  </template>
   
  <script>
  export default {
    props: {
      total: {
        type: Number,
        default: 0,
      },
      pageSizeOptions: {
        type: Array,
        default() {
          return ['10', '20', '30']
        },
      },
    },
    data() {
      return {
        pageSize: 30,
        current: 1,
      }
    },
    mounted() {},
    methods: {
      onShowSizeChange(current, pageSize) {
        this.pageSize = pageSize
        this.current = current
        this.$emit('onShowSizeChange', current, pageSize)
      },
    },
    watch: {
      current(val) {
        this.$emit('onShowSizeChange', val, this.pageSize)
      },
    },
  }
  </script>
   
  <style scoped>
  .ant-pagination {
    text-align: right;
    margin-top: 16px;
  }
  </style>